<template>
  <div class="index-container todo-list-area">
    <van-notice-bar v-if="noticeTxt" scrollable :text="noticeTxt" />
    <van-nav-bar title="待办事项" fixed left-arrow @click-left="onClickLeft" />
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多啦"
      @load="load_more"
      class="notice-todo-list"
    >
      <li v-for="(item, index) in todoList" :key="index">
        <div class="img-text-area">
          <!-- <div class="thumb">
            <img v-if="item.pictureUrl" :src="item.pictureUrl" alt="" />
            <img v-else src="../../assets/image/index/shop_empty.png" alt="" />
          </div> -->
          <!-- 商品订单待确认收款 -->
          <div class="thumb" v-if="!item.orderDetail.type && item.backlogTypeCode === 1">
            <img v-if="item.pictureUrl" :src="item.pictureUrl" alt="" />
            <img v-else src="../../assets/image/index/shop_empty.png" alt="" />
          </div>
          <!-- 审核失败 -->
          <div class="thumb" v-if="item.orderDetail.type">
            <img src="../../assets/image/index/errIcon.png" alt="" />
          </div>
          <!-- 库存预警 -->
          <div class="thumb" v-if="item.backlogTypeCode === 2">
            <img src="../../assets/image/index/tipIcon.png" alt="" />
          </div>
          <div class="txt-area">
          <!-- 待办 -->
                <div v-if="item.backlogTypeCode === 1" class="txt-area">
                  <!-- 商品订单待确认收款 -->
                  <p class="txt">
                    {{ item.backlogTitle }}
                  </p>
                  <p class="des" v-if="!item.orderDetail.type">
                    订单金额 {{ item.orderDetail.payAmount }}
                  </p>
                  <button
                    v-if="!item.orderDetail.type"
                    class="btn btn-confirm-order"
                    @click="handleConfim(item)"
                    style="background: #3575f8"
                  >
                    确认收款
                  </button>
                  <button
                    v-if="item.orderDetail && item.orderDetail.type"
                    class="btn btn-confirm-order"
                    @click="toDetail(item)"
                    style="background: #f45c4c"
                  >
                    查看
                  </button>
                  <p
                    v-if="item.orderDetail.type === 1 "
                    class="des ellipsis"
                  >
                    {{ item.orderDetail.productName }}上架
                  </p>
                  <p
                    v-if="item.orderDetail.type === 2 "
                    class="des ellipsis"
                  >
                    分销商补充信息
                  </p>
                  <p
                    v-if="item.orderDetail.type === 3"
                    class="des ellipsis"
                  >
                    {{ item.orderDetail.agencyName }}({{ item.orderDetail.agencyCode }})入驻审核
                  </p>
                  <p
                    v-if="item.orderDetail.type === 4"
                    class="des ellipsis"
                  >
                    {{ item.orderDetail.agencyName }}({{ item.orderDetail.agencyCode }})佣金提款
                  </p>
                  <p
                    v-if="item.orderDetail.type === 5"
                    class="des ellipsis"
                  >
                    充值金额{{ item.orderDetail.deposit }}
                  </p>
                  <p
                    v-if="item.orderDetail.type === 6"
                    class="des ellipsis"
                  >
                    {{ item.orderDetail.agencyName }}账户充值充值金额{{ item.orderDetail.amount}}
                  </p>
                  <p
                    v-if="item.orderDetail.type === 7"
                    class="des ellipsis"
                  >
                    {{ item.orderDetail.agencyName }}({{ item.orderDetail.agencyCode }})采购账户提款
                  </p>
                </div>
                <!-- 告警  -->
                <div v-if="item.backlogTypeCode === 2" class="txt-area">
                  <p class="txt">
                    {{ item.backlogTitle }}
                  </p>
                  <p v-if="!item.orderDetail.type" class="des">
                    当前库存数量<span style="color: #f3b24d">{{ item.orderDetail.realStock }}</span> 个, 安全库存
                    {{ item.orderDetail.safeStock }} 个
                  </p>
                  <button
                    v-if="!item.orderDetail.type"
                    class="btn btn-confirm-order"
                    @click="toDetail(item)"
                    style="background: #f3b24d; color: #fff"
                  >
                    修改库存
                  </button>
                </div>
                <!-- 通知 -->
                <div v-if="item.backlogTypeCode === 3" class="txt-area">
                  <p class="txt">
                    {{ item.backlogTitle }}
                  </p>
                   <p v-if="item.orderDetail.type && item.orderDetail.type === 2" class="des ellipsis">您的商品“{{ item.orderDetail.productName }}”被管理员下架，对应代销商品已经下架，请查看。”</p>

                  <!-- 平台商品下架 -->
                  <p v-if="item.orderDetail.type && item.orderDetail.type === 1" class="des ellipsis">平台商品“{{ item.orderDetail.productName }}”被管理员下架，对应代销商品已经下架，请查看。”</p>

                  <!-- 采购余额不足 -->
                  <p v-if="item.orderDetail.type && item.orderDetail.type === 3" class="des ellipsis">由于没有足够的可用采购账户余额，您有一笔订单被迫转交给其他合作伙伴执行</p>

                  <!-- 平台商品失效 -->
                  <p v-if="item.orderDetail.type && item.orderDetail.type === 4" class="des ellipsis">平台商品“{{ item.orderDetail.productName }}”失效</p>

                  <!-- 交易状态异常 -->
                  <p v-if="item.orderDetail.type && item.orderDetail.type === 5" class="des ellipsis">交易状态异常</p>
                  <button
                    class="btn btn-confirm-order"
                    @click="toDetail(item)"
                    style="background: #f3b24d; color: #fff"
                  >
                    查看
                  </button>
                </div>
          </div>
        </div>
      </li>
      <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
    </van-list>
  </div>
</template>
<script>
import { queryMsgList } from '@/api/home'
import { Dialog } from 'vant'
export default {
  naem: 'TODO',
  data() {
    return {
      loading: false,
      finished: false,
      todoList: [],
      queryPage: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  computed: {
    noticeTxt() {
      return this.$store.state.app.noticeTxt
    }
  },
  created() {
    this.onLoad()
  },
  methods: {
    toDetail(row, type) {
      if (row.backlogTypeCode === 1) {
        // 审核
        if (row.orderDetail.type && row.orderDetail.type === 1) {
          this.$router.push({
            name: 'ExamineDetail',
            query: {
              id: row.orderDetail.auditId
            }
          })
        }
        // 个人信息
        if (row.orderDetail.type && row.orderDetail.type === 2) {
          this.$router.push({
            name: 'MineInfo'
          })
        }
        if (row.orderDetail.type && row.orderDetail.type === 3) {
          this.$router.push({
            name: 'AuditDetail',
            query: {
              id: row.orderDetail.auditId,
              agencyId: row.relAgencyId
            }
          })
        }
        if (row.orderDetail.type && (row.orderDetail.type === 4 || row.orderDetail.type === 7 || row.orderDetail.type === 5 || row.orderDetail.type === 6)) {
          // 去资金任务详情
          this.$router.push({
            name: 'MoneyTaskDetail',
            query: {
              id: row.orderDetail.taskId
            }
          })
        }
      }
      if (row.backlogTypeCode === 2) {
        if (!row.orderDetail.type) {
          this.$router.push({
            name: 'SetStock',
            query: {
              name: row.orderDetail.productName,
              skuId: row.orderDetail.skuId,
              realStock: row.orderDetail.realStock,
              safeStock: row.orderDetail.safeStock
            }
          })
        }
      }
      if (row.backlogTypeCode === 3) {
        // 弹窗
        let str
        if (row.orderDetail.type === 1) {
        str= `您的商品${ row.orderDetail.productName }被管理员下架，对应代销商品已经下架，请查看。`
        }
        if (row.orderDetail.type === 2) {
          str= `平台商品“${ row.orderDetail.productName }被管理员下架，对应代销商品已经下架，请查看`
        }
        if (row.orderDetail.type === 3) {
          str = '由于没有足够的可用采购账户余额，您有一笔订单被迫转交给其他合作伙伴执行'
        }
        if (row.orderDetail.type === 4) {
          str = `平台商品${ row.orderDetail.productName }”失效`
        }
        if (row.orderDetail.type === 5) {
          str = '交易状态异常'
        }
        Dialog.alert({
          title: '提示',
          message: str,
        }).then(() => {
          // on close
        });
      }
    },
    load_more: function() {
      this.queryPage.pageNum += 1 // 页数+1
      this.onLoad()
    },
    onLoad() {
      const data = {
        pageNum: this.queryPage.pageNum,
        pageSize: this.queryPage.pageSize
      }
      this.loading = true
      queryMsgList(data).then(res => {
        this.loading = false
        this.todoList = this.todoList.concat(res.data.list)
        if (!res.data.hasNextPage) {
          // 数据全部加载完成
          this.finished = true
        } else {
          this.finished = false
        }
      })
    },
    queryList() {
      queryMsgList(this.queryPage).then(res => {
        this.todoList = res.data.list
      })
    },
    handleConfim(item) {
      this.$router.push({
        name: 'confirmIncome',
        query: {
          id: item.orderDetail.orderNo
        }
      })
    },
    onClickLeft() {
      this.$router.go(-1)
    }
  }
}
</script>
<style scoped lang="scss">
.ellipsis {
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  white-space: no-wrap;
}
ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.notice-todo-list {
  padding: 15px;
  li {
    margin: 0 0 15px 0;
  }
  .thumb {
    width: 59px;
    height: 59px;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .img-text-area {
    display: flex;
    align-items: center;
    position: relative;
  }
  .btn-confirm-order {
    position: absolute;
    right: 0;
    top: 0;
    width: 72px;
    height: 24px;
    background: #f3b24d;
    border-radius: 2px;
    text-align: center;
    border: none;
    color: #fff;
  }
  .txt-area {
    margin: 0 0 0 10px;
    .txt {
      font-size: 15px;
      color: #333;
      font-weight: 700;
      padding: 0;
      margin: 0 0 5px 0;
    }
    .des {
      font-size: 14px;
      color: #888;
      margin: 0;
      white-space: nowrap; //强制文本在一行内输出
      overflow: hidden; //隐藏溢出部分
      text-overflow: ellipsis; //对溢出部分加上...
    }
  }
}
</style>
